<template>
    <el-card style="width: 500px;margin: 50px">
        <el-upload
                style="text-align: center"
                class="avatar-uploader"
                action="http://localhost:9090/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
        >
            <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" style="height: 100px;width: 100px;">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <el-form :model="form" >
            <el-form-item label="姓名" >
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称" >
                <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" >
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" >
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" >
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" @click="Add">确 定</el-button>
        </el-form>
    </el-card>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "Person",
        data(){
            return{
                form:{},
                Inuser:JSON.parse(localStorage.getItem("Inuser"))
            }
        },
        methods:{
            async getUser() {
                return (await this.request.get("http://localhost:9090/user/username/" + this.Inuser.username))
            },
            Add(){
                request.post("http://localhost:9090/user",this.form).then(res=>{
                    if(res){
                        this.$message.success("成功")
                        // 更新浏览器存储的用户信息
                        this.getUser().then(res => {
                            localStorage.setItem("Inuser", JSON.stringify(res))
                            window.location.reload()
                        })
                    }else
                        this.$message.error("失败")
                })
                //this.form=""
                this.dialogFormVisible=false
            },
            handleAvatarSuccess(res){
                console.log(res)
                this.form.avatarUrl=res
            }
        },
        created() {
            this.request.get("http://localhost:9090/user/username/"+this.Inuser.username).then(res=>{

                this.form=res;

            })

        }
    }
</script>

<style scoped>

</style>